<template>
  <el-container
    style="width: 100%"
    v-loading="pageLoading"
    element-loading-text="考试结果统计中..."
    element-loading-spinner="el-icon-loading"
  >
    <el-header class="m-0 p-0" style="width: 100%">
      <el-row :gutter="18" type="flex" class="examInfo">
        <el-col :span="6">{{examBasicInfo.testSubject}}</el-col>
        <el-col :span="6">限定时间:{{examBasicInfo.totalTime}}min</el-col>
        <el-col :span="4">总分：{{examBasicInfo.totalScore}}分</el-col>
      </el-row>
    </el-header>
    <el-main class="m-0 p-0" style="width: 100%">
      <el-row
        :gutter="18"
        type="flex"
        class="reInfoHeader"
        justify="space-around"
      >
        <el-col :span="10">
            <span></span>{{name}}，您的成绩得分：{{examBasicInfo.score}}分<span></span>
        </el-col>
        <el-col :span="4">
          用时：{{examBasicInfo.times}}s<span></span>
        </el-col>
        <el-col :span="8">
            <span>
              <span style="font-size: 18px">获得等级:{{examBasicInfo.gradeId}}级</span>
            </span>
        </el-col>
      </el-row>
      <div class="resultAnalysis">
        <h2>答题解析</h2>
        <el-table :data="examResultInfo" style="width: 100%">
          <el-table-column type="expand" >
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="题目类型：">
                    <el-tag v-if="scope.row.question.problemType == 0"
                    >单选题</el-tag
                    >
                  <el-tag v-if="scope.row.question.problemType == 1"
                  >多选题</el-tag
                  >
                  <el-tag v-if="scope.row.question.problemType == 2"
                  >填空题</el-tag
                  >
                  <el-tag v-if="scope.row.question.problemType == 3"
                  >判断题</el-tag
                  >
                </el-form-item>
<!--                <el-form-item label="限定时长：">-->
<!--                  <span>{{ scope.row.question.testTime }}分钟</span>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="分值：">-->
<!--                  <span>{{ scope.row.question.score }}分</span>-->
<!--                </el-form-item>-->
              </el-form>
              <div>
                <span style="font-weight: bolder">题文：</span>
                <span style="width: 80%">{{ scope.row.question.problemCotent}}</span>
              </div>
              <ul
                v-for="(item, index) in scope.row.selections"
                :key="index"
                style="list-style: none"
              >
                <li>{{ item.problemCotent }}</li>
              </ul>
              <div>
                  <span style="color: green" class="m-r-10">
                    正确答案：
                    <span v-if="scope.row.question.problemType != 1 &&scope.row.question.problemType !=2 ">{{
                      scope.row.rightAnswer[0].problemCotent
                    }}</span>
                    <span v-if="scope.row.question.problemType == 2">{{
                      scope.row.rightAnswer
                    }}</span>
                    <span
                      v-if="scope.row.question.problemType == 1"
                      v-for="answer in scope.row.rightAnswer"
                      :key="answer.problemId"
                    >
                      <span>{{ answer.problemCotent }}， </span>
                    </span>
                  </span>
                <span v-if="scope.row.question.description == null"
                >解析：<span>此题暂无解析</span></span
                >
                <span v-else
                >解析：<span>{{
                      scope.row.question.description
                    }}</span></span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="题目类型" width="80" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.question.problemType == 0">单选题</span>
              <span v-if="scope.row.question.problemType == 1">多选题</span>
              <span v-if="scope.row.question.problemType == 2">填空题</span>
              <span v-if="scope.row.question.problemType == 3">判断题</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question.problemCotent"
            label="题目"
            width="280"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="您的答案" align="center">
            <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.question.problemType == 0 ||
                    scope.row.question.problemType == 3
                  "
                  v-for="item in scope.row.yourAnswer"
                  :key="item.problemId"
                >{{ item.problemCotent }}</span
                >
              <span
                v-if="scope.row.question.problemType == 1"
                v-for="item in scope.row.yourAnswer"
                :key="item.problemId"
              >
                  <span>{{ item.problemCotent }},</span><br/>
                </span>
              <span v-if="scope.row.question.problemType == 2">{{
                  scope.row.yourAnswer
                }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="question.score" label="分值" align="center">
          </el-table-column>
          <el-table-column
            prop="question.correct"
            label="得分"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.question.correctr == 0">答错：0</span>
              <span v-if="scope.row.question.correctr == 1"
              >答对：{{ scope.row.question.score }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import { mapGetters } from "vuex";
  import{
    getTestSuitation,
  } from "./exam.js"
  export default {
    name: "examResult",
    data(){
      return{
        pageLoading:false,
        examId:null,
        examBasicInfo:{},
        examResultInfo:[],
      }
    },
    computed: {
      ...mapGetters(["name", "roles"]),
    },
    created(){
      console.log(this.$route.query.hasOwnProperty('examId'))
      if (this.$route.query.hasOwnProperty('examId')===true){
        console.log(this.$route.query.examId)
        this.examId = this.$route.query.examId;
        this.getExamResult();
      }
    },
    methods:{
      getExamResult(){
        getTestSuitation(this.examId).then(response => {
          if(response.code===20000){
            this.examBasicInfo = response.data.tbExam
            if(response.data.problem.length!=0){
              response.data.problem.forEach(function(problem,index){
                if (problem.question.problemType ===0||problem.question.problemType===3){

                }
              })
            }
            // if (response.data.problem.question.problemType ===0||response.data.problem.question.problemType===3){
            //   console.log(response.data.problem.yourAnswer)
            // }
            this.examResultInfo = response.data.problem
          }
          console.log(this.examResultInfo)
        })
      }
    },
  }
</script>

<style scoped>
  @import "../../styles/common.css";
  .examInfo {
    color: white;
    background-color: #4a9ff9;
    padding: 20px 50px;
    font-size: 18px;
  }

  .reInfoHeader {
    width: 100%;
    margin: 0;
    padding: 20px 50px;
    font-size: 20px;
    border-bottom: 1px solid #9aaabf;
  }

  .reInfoHeader > div,
  .resultInfo span {
    height: 30px;
    line-height: 28px;
  }

  .resultAnalysis {
    width: 80%;
    margin: 0 auto;
  }

  .quetanswer > div {
    margin: 5px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33%;
  }
  .el-dialog__wrapper >>> .el-dialog {
    background: rgba(0, 0, 0, 0);
    box-shadow: none;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: white;
  }
</style>
